Vue.component('my-header', {
    data: function () {
        return {
            user: localStorage.user ? JSON.parse(localStorage.user) : null,
            activeIndex:"0",
            wd:""
        }
    },
    methods: {
        search(){
          location.href="/contentList.html?wd="+this.wd;
        },
        logout(){
            if (confirm("您确认退出登录吗?")){
                //发请求退出登录
                axios.get("/v1/users/logout").then(function () {
                    localStorage.clear();//清空登录成功时保存的数据
                    location.href="/";
                })
            }
        },
        handleSelect(key,keyPath){
            if (key==0){
                location.href="/";
            }else if(key==1){
                location.href="/title/toShop";
            }else if(key==2){
                location.href="/title/toShop";
            }
        }
    },
    created: function () {
        //得到地址栏中的type值
        let type = new location.search.split("/")[2];
        //地址栏里面有可能不存在type参数, 如果是在首页此时应该让首页处于激活状态,
        // 不在首页则谁都不选中
        this.activeIndex = type;
        //判断是否是首页
        if (location.pathname=="/"||location.pathname=="/index.html"){
            this.activeIndex = "0";
        }
        //如果是发帖页面则不选中任何一个
        if (location.pathname.includes("postArticle")){
            this.activeIndex = null;
        }
    },
    template: `<el-container>
    <!--抬头开始-->
    <el-header>
      <div class="center" style="position: fixed;
            top: 0;
            z-index: 99;
            background-color: white;" >
        <el-row gutter="20">
          <el-col span="6" style="width: 20%">
            <img src="../static/http://rww08uahf.hn-bkt.clouddn.com/964a0f20e41b4303959890fe8c2231be.png" width="196" height="65" >
          </el-col>
          <el-col span="8" style="padding: 0">
            <el-menu mode="horizontal" active-text-color="blue" style="width: 400px; padding: 15px 0 0 0; margin: 0 auto">
              <el-menu-item index="0" @click="location.href='/'" style="font-size: 20px; width: 100px">首页</el-menu-item>
              <el-menu-item index="1" @click="location.href='/title/toShop'" style="font-size: 20px; width: 100px">商城</el-menu-item>
              <el-menu-item index="2" @click="location.href='/title/toShop'" style="font-size: 20px; width: 100px">赞助</el-menu-item>
            </el-menu>
          </el-col>
          <el-col span="6">
            <el-input style="margin-top: 10px" placeholder="请输入搜索的关键字">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </el-col>
          <el-col span="2">
            <el-popover
                placement="top-start"
                title="欢迎来到kun吧"
                width="200"
                trigger="hover"
                content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
              <div slot="reference">
                <i class="el-icon-user" style="font-size: 30px;position: relative;margin:15px 20px;"></i>
              </div>
              <el-button type="info" @click="location.href='/user/toRegByPhone'">注册</el-button>
              <el-button style="background-color: #3c32fb;color: white" @click="location.href='../../../templates/regByMail.html'">登录</el-button>
            </el-popover>
          </el-col>
          <el-col span="2">
            <el-button style="margin-top: 10px" type="info" round @click="location.href='/blog/toEditor'">发布</el-button>
          </el-col>
        </el-row>
      </div>
    </el-header>`
})